<script setup>
import {computed, ref, watch} from "vue";
import {useRoute} from "vue-router";
import {useStore} from "vuex";
const route = useRoute();
const store = useStore();
// store.commit('clearView');
//1、计算属性，当store.state.cachedViews发生改变时，就会立马更新要缓存的属性
const cachedViews = computed(() => {
    let cachedStr = store.state.cachedViews.join(",");
    return cachedStr;
});
watch(
    route,
    (newValue, oldValue) => {
        if (newValue.name && newValue.meta.keepAlive) {
            store.commit("addView", newValue);
        }
    },
    {immediate: true}
);
</script>
<template>
    <div id="app" style="height: 100%">
        <router-view v-slot="{Component}">
            <keep-alive :include="cachedViews">
                <component :is="Component" :key="$route.meta.title" />
            </keep-alive>
        </router-view>
    </div>
</template>

<style lang="scss" scoped>
#app {
    // font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2c3e50;
    font-size: 28px;
}

#nav {
    padding: 30px;

    a {
        font-weight: bold;
        color: #2c3e50;

        &.router-link-exact-active {
            color: #42b983;
        }
    }
}
</style>
